import Hello from '@/view/Hello.mdx'
import face from '@/assets/face.jpg'
import type {MDXComponents} from 'mdx/types.js'


export default defineComponent({

   props:{
      name:{
         type: String,
         default: 'Tomato'
      }
   },

    setup(props){ 
   
         const components:MDXComponents | any ={
            Title: () => <span style="color: teal">{props.name}</span>,
            Face:  () => <img src={face} width="100" height="100" />,
            Button: (props:any,{slots}:any) => <button {...props}>{ slots.default ? slots.default() : 'foo' }</button>
         } 

         return () => (
             <div style="padding-right: 1rem">
                  <Hello components={components}/>
             </div>
         )
       
    }

})
